<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环滚动</title>
	</head>
	<style>
		  #box {
		            width: 1030px;   /* 设置父元素盒子总宽度=每张图片宽度+图片中间的边距margin之和 */
		            margin: 50px auto;  /* 设置父元素距顶部50px，居中，便于显示 */
		            overflow: hidden;  /* 设置超出的图片内容隐藏 */
		            
		        }
		        #box ul {
		            list-style: none;   /* 取消ul的默认圆点样式 */
		            width: 5000px;    /* ul宽度设置大一点，超过图片+边距总长度的两倍 */
		            position: relative;   /* 设置相对定位，便于使用left控制图片列表的位置，不断左移 */
		        }
		        #box ul li {
		            float: left;    /* 设置每一项靠左在一行显示 */
		            margin-right: 10px;  /* 设置右边距 */
		        }
		        #list img{
		            width: 250px;  /* 设置图片统一宽度 */
		        }
		        /* 当鼠标悬浮在图片上时 */
		        #list img:hover{
		            cursor: pointer;  /* 鼠标变为手势 */
		            scale: 1.3;  /* 图片放大为1.3倍 */
		        }
		
	</style>
	<body>

		   <div id="box">
		        <ul id="list">
		            <li><img src="https://source.unsplash.com/random/800x600?3" alt="" /></li>
		            <li><img src="https://source.unsplash.com/random/800x600?2" alt="" /></li>
		            <li><img src="https://source.unsplash.com/random/800x600?1" alt="" /></li>
		            <li><img src="https://source.unsplash.com/random/800x600?4" alt="" /></li>
		        </ul>
		    </div>
			<script>
				
				 // 在当前列表后追加复制一份，使列表长度变为当前2倍
				        // 获取list列表
				        var olist = document.getElementById("list");  
				        // 获取li数组
				        var liArr = document.querySelectorAll('#list>li');
				        // 新建一个变量接收新节点
				        var newLiNode = null;
				        // 遍历li数组，依次复制li，并挂载到父节点上
				        for(var i = 0; i<liArr.length;i++){
				            // 复制节点
				            newLiNode = liArr[i].cloneNode(true);
				            // 挂载在父节点上
				            olist.appendChild(newLiNode);
				        }
				
				        // 定义一个全局变量的定时器
				        var timer = null;
				        // 定义一个全局变量的left值
				        var moveLeft = 0;
				
				        // 声明滚动函数move，不传参，内部变量使用全局变量moveLeft
				        function move(){
				            timer = setInterval(function(){
				                // 当跑完一轮时，重置位置
				                if(moveLeft === -1040){
				                    moveLeft = 0;
				                }
				                moveLeft -= 3;
				                // 设置列表每20毫秒左移5px
				                olist.style.left = moveLeft+"px";
				            },100)
				        }
				        
				        // 加载页面时调用该滚动函数
				        move();
				       
				        // 鼠标移入清清除定时器
				        olist.onmouseenter = function(){
				            clearInterval(timer);
				        }; 
						
				        // 鼠标移出，调用move重新开启定时器
				        olist.onmouseleave = function(){
				            move();
				        }
				
			</script>
	
	</body>
</html>